
<script setup>
defineOptions({
  name: 'EditMenuModal',
});
import { MENU_TYPE } from "@/constants/enums/menuEnums.js";
import { reactive, useTemplateRef, computed } from "vue";
import { useFormModalContext } from "@/hooks/modal";

const { props,resolve, reject } = useFormModalContext();

const rules = {
  title: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入路由名称', trigger: 'blur' },
  ],
  path: [
    { required: true, message: '请输入菜单路径', trigger: 'blur' },
  ],
  component: [
    { required: true, message: '请输入文件路径', trigger: 'blur' },
  ],
}

const menuTree = props.menuTree;
const formState = reactive(props.formState);
const title = computed(() => {
  return formState.id ? '编辑菜单' : '新增菜单';
});
const formRef = useTemplateRef('formRef');
// 方法区
const handleOk = ()=>{
  formRef.value.validate().then(() => {
    resolve(formState);
  })
}
const handleCancel = ()=>{
  reject()
}
</script>

<template>
  <y-form-modal :title="title" :width="800">
    <a-form :model="formState" :labelCol="{span: 7, offset: 0}" :rules="rules" ref="formRef">
      <a-row :gutter="20">
        <a-col :span="12">
          <y-form-item label="菜单类型" name="type">
            <YLocalSelect v-model="formState.type" option="MENU_TYPE_OPTIONS"></YLocalSelect>
          </y-form-item>
        </a-col>
        <a-col :span="12">
          <y-form-item label="父级菜单" name="parentId">
            <a-tree-select allowClear v-model:value="formState.parentId" :tree-data="menuTree" :fieldNames="{children:'children', label:'title', value: 'id' }"></a-tree-select>
          </y-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="12">
          <y-form-item label="菜单名称" name="title">
            <a-input v-model:value="formState.title" />
          </y-form-item>
        </a-col>
        <a-col :span="12">
          <y-form-item label="路由名称" name="name">
            <a-input v-model:value="formState.name" />
          </y-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="12">
          <y-form-item label="菜单路径" name="path">
            <a-input v-model:value="formState.path" />
          </y-form-item>
        </a-col>
        <a-col :span="12" v-show="formState.type === MENU_TYPE.MENU">
          <y-form-item label="文件路径" name="component">
            <a-input v-model:value="formState.component" />
          </y-form-item>
        </a-col>
        <a-col :span="12" v-show="formState.type === MENU_TYPE.DIR">
          <y-form-item label="布局组件" name="component">
            <YLocalSelect v-model="formState.component" option="MENU_LAYOUT_OPTIONS"></YLocalSelect>
          </y-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="12">
          <y-form-item label="菜单图标" name="icon">
            <a-input v-model:value="formState.icon" />
          </y-form-item>
        </a-col>
        <a-col :span="12">
          <y-form-item label="排序" name="sort">
            <a-input v-model:value="formState.sort" />
          </y-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="12">
          <y-form-item label="是否显示" name="show">
            <YLocalSelect v-model="formState.show" option="YES_NO_OPTIONS"></YLocalSelect>
          </y-form-item>
        </a-col>
        <a-col :span="12">
          <y-form-item label="是否缓存" name="keepAlive">
            <YLocalSelect v-model="formState.keepAlive" option="YES_NO_OPTIONS"></YLocalSelect>
          </y-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="12">
          <y-form-item label="设备类型" name="deviceType">
            <YLocalSelect v-model="formState.deviceType" option="DEVICE_TYPE_OPTIONS"></YLocalSelect>
          </y-form-item>
        </a-col>
        <a-col :span="12">
          <y-form-item label="是否禁用" name="status">
            <YLocalSelect v-model="formState.status" option="YES_NO_OPTIONS"></YLocalSelect>
          </y-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <div class="footer">
        <a-button type="primary" @click="handleOk">确定</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </div>
    </template>
  </y-form-modal>
</template>
